<template>
	<view class="container">
		<!-- 头部搜索区域 -->

		<!-- 功能区域 -->
		<view class="function-area">
			<view class="function-item" v-for="(item, index) in functionList" :key="index" @click="goToPage(item.url)">
				<image :src="item.image" mode="aspectFill" class="function-image" />
				<text class="function-text">{{ item.title }}</text>
			</view>
		</view>

		<!-- 订单发布区域 -->
		<view class="publish-area">
			<view class="publish-header">
				<text class="section-title">发布订单</text>
				<uni-icons type="right" size="16" color="#666"></uni-icons>
			</view>
			<view class="publish-content">
				<view class="publish-btn send" @click="goToJijian">
					<uni-icons type="paperplane" size="24" color="#FFFFFF"></uni-icons>
					<text>发布寄件</text>
				</view>
				<view class="publish-btn receive" @click="goToDaiqu">
					<uni-icons type="download" size="24" color="#FFFFFF"></uni-icons>
					<text>发布代取</text>
				</view>
			</view>
		</view>

		<!-- 订单列表区域 -->
		<view class="order-area">
			<view class="order-header">
				<text class="section-title">最新订单</text>
				<text class="more-text">查看更多</text>
			</view>
			<view class="order-list">
				<view class="order-item" v-for="(item, index) in orderList" :key="index">
					<view class="order-top">
						<text class="order-type">{{ "寄取件服务" }}</text>
						<text class="order-status">{{ getOrderStatus(item.status) }}</text>
					</view>
					<view class="order-info">
						<text class="order-address">{{ item.senderAddress }}</text>
						<text class="order-price">￥{{ item.fee }}</text>
					</view>
					<view class="order-bottom">
						<text class="order-time">{{getTimeAgo(item.createTime) }}</text>
						<uni-button size="mini" type="primary" class="grab-btn" @click="handGetOrder(item.orderId)">立即抢单</uni-button>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script lang="ts" setup>
	import {
		ref
	} from 'vue';
	import ImgVue from '../../../components/Img/Img.vue';
	import {
		acceptOrder,
		getWaitReciveOrder
	} from '../../../api/order';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const currentTab = ref(0);

	const functionList = ref([{
			title: '快递查询',
			image: 'https://ai-public.mastergo.com/ai/img_res/fcae0921e7cf8b6391200b4d3ccff8b7.jpg',
		},
		{
			title: '订单管理',
			image: 'https://ai-public.mastergo.com/ai/img_res/2c9f9811c66c593b6ebda6a52705a766.jpg',
			url: '/pages/tabbar/tabbar-2/tabbar-2'
		},
		{
			title: '我的接单',
			image: 'https://ai-public.mastergo.com/ai/img_res/ba9fc0347420b4e6d064b95f375997c0.jpg',
			url: '/pages/tabbar/tabbar-2/tabbar-2'
		},
		{
			title: '个人中心',
			image: 'https://ai-public.mastergo.com/ai/img_res/cb0de62a1cf6fed968ab2237cb081298.jpg',
			url: '/pages/tabbar/tabbar-5/tabbar-5'
		}
	]);

	const orderList = ref([{
			type: '代取快递',
			status: '待抢单',
			address: '菜鸟驿站 - 大学城南苑',
			price: '5',
			time: '10分钟前'
		},
		{
			type: '寄件服务',
			status: '待抢单',
			address: '大学城北苑 - 顺丰快递',
			price: '8',
			time: '15分钟前'
		},
		{
			type: '代取快递',
			status: '待抢单',
			address: '京东快递 - 大学城东苑',
			price: '6',
			time: '20分钟前'
		}
	]);

	const tabList = ref([{
			title: '首页',
			icon: 'home'
		},
		{
			title: '订单',
			icon: 'list'
		},
		{
			title: '消息',
			icon: 'chat'
		},
		{
			title: '我的',
			icon: 'person'
		}
	]);

	const goToJijian = () => {
		uni.navigateTo({
			url: '/pages/jijian/jijian'
		})
	}

	const goToDaiqu = () => {
		uni.navigateTo({
			url: '/pages/daiqu/daiqu'
		})
	}

	const goToPage = (url) => {
		uni.switchTab({
			url: `${url}`
		})
	}

	const fetchWaitOrder = async () => {
		const response = await getWaitReciveOrder();
		orderList.value = response.data
	}

	const getOrderStatus = (status: any)=> {
		switch (status) {
			case 0:
				return '待接单';
			case 1:
				return '已接单';
			case 2:
				return '配送中';
			case 3:
				return '已完成';
			case 4:
				return '已取消';
			default:
				return '未知状态';
		}
	};
	
	const getTimeAgo = (createTime: string): string => {
	  const now = new Date(); // Current time
	  const createDate = new Date(createTime); // Time when the order was created
	  const diffInMs = now.getTime() - createDate.getTime(); // Difference in milliseconds
	
	  const diffInHours = Math.floor(diffInMs / (1000 * 60 * 60)); // Difference in hours
	  const diffInDays = Math.floor(diffInHours / 24); // Difference in days
	
	  if (diffInDays > 0) {
	    return `${diffInDays}天前`;
	  } else if (diffInHours > 0) {
	    return `${diffInHours}小时前`;
	  } else {
	    return '刚刚'; // If within the last hour
	  }
	};
	
	const handGetOrder=async(id: any)=>{
		const response = await acceptOrder(id);
		if(response.code===200){
			uni.showToast({
				title:'接单成功'
			}),
			fetchWaitOrder();
		}
	}

	onLoad(() => {
		fetchWaitOrder();
	})
</script>

<style scoped>

	.container {
		min-height: 100%;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
	}

	.header {
		background-color: #ffffff;
		padding: 20rpx 30rpx;
	}

	.search-box {
		display: flex;
		align-items: center;
		background-color: #f5f5f5;
		padding: 15rpx 20rpx;
		border-radius: 30rpx;
	}

	.search-input {
		flex: 1;
		margin-left: 20rpx;
		font-size: 14px;
	}

	.function-area {
		display: flex;
		flex-wrap: wrap;
		padding: 30rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
	}

	.function-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.function-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 20rpx;
	}

	.function-text {
		margin-top: 10rpx;
		font-size: 12px;
		color: #333333;
	}

	.publish-area {
		margin-top: 20rpx;
		background-color: #ffffff;
		padding: 30rpx;
	}

	.publish-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}

	.publish-content {
		display: flex;
		justify-content: space-between;
	}

	.publish-btn {
		width: 330rpx;
		height: 160rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.publish-btn text {
		margin-top: 20rpx;
		color: #ffffff;
		font-size: 14px;
	}

	.send {
		background: linear-gradient(135deg, #2979ff, #1565c0);
	}

	.receive {
		background: linear-gradient(135deg, #00b0ff, #0277bd);
	}

	.order-area {
		margin-top: 20rpx;
		background-color: #ffffff;
		padding: 30rpx;
		flex: 1;
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.more-text {
		font-size: 12px;
		color: #666666;
	}

	.order-item {
		background-color: #f8f8f8;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.order-top {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.order-type {
		font-size: 14px;
		color: #333333;
		font-weight: bold;
	}

	.order-status {
		font-size: 12px;
		color: #2979ff;
	}

	.order-info {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.order-address {
		font-size: 14px;
		color: #666666;
	}

	.order-price {
		font-size: 16px;
		color: #ff3d00;
		font-weight: bold;
	}

	.order-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.order-time {
		font-size: 12px;
		color: #999999;
	}

	.grab-btn {
		margin: 0;
	}

	.tab-bar {
		height: 100rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1px solid #eeeeee;
		flex-shrink: 0;
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tab-text {
		margin-top: 6rpx;
		font-size: 12px;
		color: #666666;
	}

	.tab-text.active {
		color: #2979ff;
	}
</style>